<template>
  <div class="role-edit">
    <p class="role-edit-title">管理员权限设置</p>
    <div class="role-edit-route">
      <p>导航名称</p>
      <p>权限分配</p>
      <p>全选</p>
    </div>
    <div class="role-edit-setting">
      <div class="template" v-for="(data, i) in list" :key="i">
        <div class="template-box">
          <img src="" alt="" />
          <p>{{ data["title"] }}</p>
        </div>
        <div class="template-box">
          <div class="editr" v-for="(_data, _i) in data.value" :key="_i">
            <el-checkbox v-model="_data.value">{{ _data.name }}</el-checkbox>
          </div>
        </div>
        <div class="template-box">
          <el-checkbox v-model="_data.value">全选</el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "实时监控",
          value: [
            { name: "显示", value: false },
            { name: "查看", value: false },
          ],
          choose: false,
          children: [],
        },
        {
          title: "应用管理",
          value: [{ name: "显示", value: false }],
          choose: false,
          children: [
            {
              title: "业务管理",
              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              choose: false,

              children: [],
            },
            {
              title: "设备管理",
              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              choose: false,

              children: [],
            },
            {
              title: "车辆管理",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              children: [],
            },
            {
              title: "司机管理",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              children: [],
            },
          ],
        },
        {
          title: "数据查询",
          choose: false,

          value: [{ name: "显示", value: false }],
          children: [
            {
              title: "数据查询",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
              ],
              children: [],
            },
            {
              title: "业务报表",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "打印", value: false },
              ],
              children: [],
            },
          ],
        },
        {
          title: "控制面板",
          choose: false,

          value: [{ name: "显示", value: false }],
          children: [
            {
              title: "账号管理",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              children: [],
            },
            {
              title: "角色管理",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              children: [],
            },
            {
              title: "功能配置",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              children: [],
            },
            {
              title: "管理日志",
              choose: false,

              value: [
                { name: "显示", value: false },
                { name: "查看", value: false },
                { name: "新增", value: false },
                { name: "修改", value: false },
                { name: "删除", value: false },
              ],
              children: [],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang='scss' scoped>
.role-edit {
  &-setting {
    .template {
      padding: 0.1rem;
      display: flex;
      align-items: center;
      &-box {
        .el-checkbox{
          margin-left: .1rem;
        }
        display: flex;
        
        text-align: left;
        width: 33%;
      }
    }
  }
  &-route {
    p {
      width: 33%;
      text-align: left;
      font-size: 0.12rem;
      font-weight: bold;
      color: #000;
    }
    display: flex;
    padding: 0.1rem;
    justify-content: space-around;
    color: #f0f9ff;
  }
  &-title {
    background: #006ab4;
    text-align: left;
    color: #fff;
    padding: 0.1rem 0.14rem;
  }
}
</style>